import React from 'react'
import ReactDOM from 'react-dom/client'
import reportWebVitals from './reportWebVitals'
import Routes from '@/routes'
import { Store, StoreProvider } from '@/stores'
import { ChakraProvider, CSSReset } from '@chakra-ui/react'
import { BrowserRouter } from 'react-router-dom'
import theme from '@/themes'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

const strictMode = process.env.REACT_APP_STRICTMODE === 'true'

const Root = (
  <StoreProvider value={Store}>
    <ChakraProvider theme={theme}>
      <CSSReset />
      <BrowserRouter><Routes /></BrowserRouter>
    </ChakraProvider>
  </StoreProvider>
)
root.render(
  (strictMode && <React.StrictMode>{Root}</React.StrictMode>) || <>{Root}</>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()
